<template>
    <div>
        <Row style="height: 100vh;">
            <i-col span="8" style="height: 100vh; border: 1px solid black; text-align: left; padding: 20px;">
                <Tree :data="data3" :load-data="loadData" @on-select-change="selectRow" show-checkbox></Tree>
            </i-col>
            <i-col span="16" style="height: 100vh; border: 1px solid black;">
                <Row style="text-align: right; padding: 20px; border: 1px solid black;">
                    <Button @click="showCreateFolder">新建目录</Button>
                    <Button @click="uploadFile">上传文件</Button>
                </Row>
                <Row>
                    <List>
                        <ListItem v-for="(item, index) in nowPathFile" :key="index">
                            <ListItemMeta avatar="asd" :title="item.name" description="This is description, this is description." />
                            <template slot="action">
                                <li>
                                    <Button @click="deleteFolderOrFile(item.name, item.type)">删除</Button>
                                    <Button @click="showFileContent(item.name)" v-if="item.type === 'file'">查看</Button>
                                </li>
                            </template>
                        </ListItem>
                    </List>
                </Row>
            </i-col>
        </Row>
        <Modal
                v-model="modal.createFolder"
                title="新建目录"
                @on-ok="createFolder"
                ok-text="创建"
                cancel-text="取消"
        >
            <Form ref="createFolderForm" :model="forms.createFolder" :label-width="80" :rules="validates.createFolderForm">
                <FormItem label="目录名称" prop="folderName">
                    <Input v-model="forms.createFolder.folderName" placeholder="请输入目录名称" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="modal.createFolder = false">取消</Button>
                <Button type="primary" size="large" @click="createFolder">确定</Button>
            </div>
        </Modal>
        <Modal
                v-model="modal.fileContent"
                title="文件预览"
                @on-ok="showFileContent"
                ok-text="保存"
                cancel-text="取消"
        >
            <Form ref="showFileContent" :model="forms.fileContent" >
                <FormItem>
                    <Input type="textarea" v-model="forms.fileContent.content" :autosize="{minRows: 15,maxRows: 15}" placeholder="请输入文件内容" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="modal.fileContent = false">取消</Button>
                <Button type="primary" size="large" @click="saveFileContent">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "FileManager",
        data () {
            return {
                validates: {
                    createFolderForm: {
                        folderName: [
                            {
                                required: true,
                                message: '目录名称不能为空',
                                trigger: 'blur'
                            }
                        ]
                    }
                },
                forms: {
                    createFolder: {
                        folderName: ""
                    },
                    fileContent: {
                        content: ""
                    }
                },
                modal: {
                    createFolder: false,
                    fileContent: false
                },
                data3: [
                    {
                        title: '/',
                        loading: false,
                        children: [],
                        actionPath: "/"
                    }
                ],
                nowSelectNode: null,
                nowEditFileName: null,
                nowPathFile: [

                ]
            }
        },
        methods: {
            loadData (item, callback) {
                let self = this;
                let param = {
                    path: item.actionPath
                };
                window.console.log(232, self.$qs.stringify(param));
                self.$axios.get('/api/file/manager/list?' + self.$qs.stringify(param)).then(function (response) {
                    if ( response.data.code === 200 ) {
                        let formatData = response.data.data.filter(x => x.type === 'dir').map(x => {
                            return {
                                title: x.name,
                                actionPath: item.actionPath + x.name + "/",
                                loading: false,
                                children: []
                            };
                        });
                        callback(formatData);
                    }
                });
            },
            selectRow(data, node) {
                let self = this;
                let param = {
                    path: node.actionPath
                };
                window.console.log(1232, self.$qs.stringify(param));
                self.$axios.get('/api/file/manager/list?' + self.$qs.stringify(param)).then(function (response) {
                    if ( response.data.code === 200 ) {
                        self.nowPathFile = response.data.data;
                    }
                });
                this.nowSelectNode = node;
            },
            showCreateFolder() {
                if ( this.nowSelectNode === null ) {
                    this.$Message.warning("请先选中目录");
                    return;
                }
                this.modal.createFolder = true;
            },
            createFolder() {
                let self = this;
                self.$refs['createFolderForm'].validate(function (valid) {
                    window.console.log(111, valid);
                    if ( valid ) {
                        let param = {
                            path: self.nowSelectNode.actionPath,
                            newPath: self.forms.createFolder.folderName
                        };
                        self.$axios.post('/api/file/manager/folder?' + self.$qs.stringify(param)).then(function (response) {
                            let code = response.data.code;
                            if ( code === 200 ) {
                                self.$Message.success("目录创建成功");
                                self.selectRow(null, self.nowSelectNode);
                                self.modal.createFolder = false;
                            } else {
                                self.$Message.error("目录创建失败, 原因是:" + response.data.message);
                            }
                        })
                    } else {
                        self.modal.createFolder = true;
                    }
                });
            },
            deleteFolderOrFile(fileName, fileType) {
                let self = this;
                if ( fileType === 'dir' ) {
                    self.$Modal.confirm({
                        title: 'Title',
                        content: '<p>确定要删除该目录吗?</p>',
                        onOk: () => {
                            let param = {
                                path: self.nowSelectNode.actionPath,
                                deleteFolderName: fileName
                            };
                            self.$axios.delete('/api/file/manager/folder?' + self.$qs.stringify(param)).then(function (response) {
                                let code = response.data.code;
                                if ( code === 200 ) {
                                    self.$Message.success("目录删除成功");
                                    self.selectRow(null, self.nowSelectNode);
                                } else {
                                    self.$Message.error("目录删除失败, 原因是:" + response.data.message);
                                }
                            })
                        },
                        onCancel: () => {

                        }
                    });
                }
                if ( fileType === 'file' ) {
                    self.$Modal.confirm({
                        title: 'Title',
                        content: '<p>确定要删除该文件吗?</p>',
                        onOk: () => {
                            let param = {
                                path: self.nowSelectNode.actionPath,
                                deleteFileName: fileName
                            };
                            self.$axios.delete('/api/file/manager/file?' + self.$qs.stringify(param)).then(function (response) {
                                let code = response.data.code;
                                if ( code === 200 ) {
                                    self.$Message.success("文件删除成功");
                                    self.selectRow(null, self.nowSelectNode);
                                } else {
                                    self.$Message.error("文件删除失败, 原因是:" + response.data.message);
                                }
                            })
                        },
                        onCancel: () => {

                        }
                    });
                }

            },
            showFileContent(name) {
                let self = this;
                self.nowEditFileName = name;
                let param = {
                    path: self.nowSelectNode.actionPath,
                    fileName: name,
                    content: self.forms.fileContent.content
                };
                self.$axios.get('/api/file/manager/content?' + self.$qs.stringify(param)).then(function (response) {
                    window.console.log(response);
                    let code = response.data.code;
                    if ( code === 200 ) {
                        self.forms.fileContent.content = response.data.content;
                        self.modal.fileContent = true;
                    } else {
                        self.$Message.error("文件删除失败, 原因是:" + response.data.message);
                    }
                });
            },
            saveFileContent() {
                let self = this;
                self.$axios.patch('/api/file/manager/edit', {
                    path: self.nowSelectNode.actionPath,
                    fileName: self.nowEditFileName,
                    content: self.forms.fileContent.content
                }).then(function (response) {
                    window.console.log(response);
                    let code = response.data.code;
                    if ( code === 200 ) {
                        self.modal.fileContent = false;
                        self.$Message.error("保存成功");
                    } else {
                        self.$Message.error("文件删除失败, 原因是:" + response.data.message);
                    }
                });
            },
            uploadFile() {

            }
        }
    }
</script>

<style scoped>

</style>